<template>
  <div class="l-rblock">
    <el-input
      ref="main"
      :placeholder="$t(placeholder)"
      v-model="selectValue"
      :size="size"
      :clearable="disabled ? false : clearable"
      :disabled="disabled"
      @focus="handleShow"
      @clear="handleClear"
    >
      <span slot="append" @click="handleShow">
        <el-button slot="append" icon="learun-icon-personnel" />
      </span>
    </el-input>
    <l-dialog
      :title="$t('选择角色')"
      :visible.sync="dialogVisible"
      :height="480"
      width="800px"
      :hasBtns="multiple"
      @ok="handleRoleSelectOk"
      @closed="handleRoleSelectClosed"
    >
      <l-role-select-panel :multiple="multiple" @rowClick="rowClick"/>
    </l-dialog>
  </div>
</template>
<script>
export default {
  name: "l-role-select",
  props: {
    value: {},
    size: {
      type: String,
      default: "mini",
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogVisible: false,
      selectData: null,
    };
  },
  computed: {
    selectValue: {
      get() {
        return this.lr_roleName(this.value);
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  mounted() {},
  methods: {
    handleChange(val) {
      this.$emit("change", val);
    },
    handleClear() {
      this.$emit("change", undefined);
    },
    handleShow() {
      this.dialogVisible = true;
    },
    rowClick(data){
      this.selectValue = data.f_RoleId;
      this.handleChange(data);
      this.dialogVisible = false;
    },
    handleRoleSelectOk(){

    },
    handleRoleSelectClosed(){

    }
  },
};
</script>